<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-show的使用</title>
</head>
<script src="../js/vue.js"></script>
<body>

<div id="app">
    <p>
        v-if和v-show的区别是：<br/>
        v-if是直接把元素删除掉了<br/>
        v-show是直接设置了一个行内样式：style="display:none"，没有把元素删除掉<br/>
        不信你可以试着把isShow设为false，那么就会发现，两个元素的显示是不一样的<br/>
        说白了，如果频繁的切换，用v-show，性能好一点，如果只是几次的话，用v-if，不用考虑性能
    </p>
    <h2 v-if="isShow" id="if">{{message}}</h2>
    <h2 v-show="isShow" id="show">{{message}}</h2>
</div>

</body>

<script>
    const vue = new Vue({
        'el': '#app',
        'data': {
            message: '我是菜鸡',
            isShow: true

        },
        'methods': {}
    })
</script>
</html>